<template>
  <section class="app-inner">
    <el-card class="header-card">
      <el-form :inline="true" :model="queryParams" size="small" label-width="84px">
        <el-form-item label="告警类型">
          <!-- <el-select v-model="queryParams.alarmType" placeholder="请选择告警类型" clearable>
            <el-option
              v-for="item in alarmTypeList"
              :key="item.strategyId"
              :label="item.alarmType"
              :value="item.alarmType"
            ></el-option>
          </el-select> -->
          <el-input clearable v-model="queryParams.alarmType" placeholder="请输入告警类型"> </el-input>
        </el-form-item>
        <el-form-item label="设备类型">
          <!-- <el-select v-model="queryParams.eqptType" placeholder="请选择设备类型" clearable>
            <el-option
              v-for="item in eqptTypeList"
              :key="item.eqptTypeId"
              :label="item.eqptType"
              :value="item.eqptType"
            ></el-option>
          </el-select> -->
          <el-input clearable v-model="queryParams.eqptType" placeholder="请输入设备类型"> </el-input>
        </el-form-item>
        <el-form-item label="品名">
          <el-input clearable v-model="queryParams.productName" placeholder="请输入品名"> </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="searchData">查询</el-button>
          <el-button @click="handleAdd" type="primary" icon="plus" size="small">添加</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card class="table-card">
      <el-table border :data="tableData" style="width: 100%">
        <el-table-column prop="alarmType" label="告警类型"></el-table-column>
        <el-table-column prop="eqptTypeName" label="设备类型"></el-table-column>
        <el-table-column prop="productName" label="品名"></el-table-column>
        <el-table-column prop="eqptAttribute" label="监测字段"></el-table-column>
        <el-table-column prop="alarmLevel" label="告警等级">
          <template slot-scope="scope">
            <div v-for="(item, index) in getLabel(scope.row, 1)" :key="index">
              {{ item }}
            </div>
          </template>
        </el-table-column>
        <el-table-column width="300" prop="alarmCondition" label="告警条件">
          <template slot-scope="scope">
            <div v-for="(item, index) in getLabel(scope.row, 2)" :key="index">
              <span>{{ scope.row.eqptAttribute }}</span>
              <span>{{ item.conditionName1 + '' + item.value1 }}</span>
              <span>{{ scope.row.attributeSuffix }}</span>
              <span v-if="item.conditionName2 && item.value2">
                {{ '且' + item.conditionName2 + '' + item.value2 }}{{ scope.row.attributeSuffix }}
              </span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="changeOrder" label="是否转为工单">
          <template slot-scope="scope">
            <div v-for="(item, index) in getLabel(scope.row, 3)" :key="index">
              {{ item }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button type="text" size="small" @click="handleDelete(scope.row.strategyId)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        layout="total, prev, pager, next"
        @current-change="pageHandleChange"
        :current-page="pageNum"
        :page-size="pageSize"
        :total="totalPageNum"
      ></el-pagination>
    </el-card>

    <tactics-modal
      :eqptTypeList="eqptTypeList"
      :alarmTypeList="clickBtnType === 1 ? alarmTypeListForAdd : alarmTypeList"
      ref="TacticsModal"
      @ok="TacticsModalOk"
    ></tactics-modal>
  </section>
</template>

<script>
import { getAlarmType, getAlarmTypeForAdd, getEqptType, searchTactics, delAlarmTactics } from './js/alarm'
import {
  alarmLevelList,
  changeOrderList,
  stringCondition,
  numberCondition,
  booleanCondition,
  booleanValue
} from './js/constants'

import TacticsModal from './components/TacticsModal'
export default {
  name: 'TacticsList',
  components: { TacticsModal },
  data () {
    return {
      queryParams: {},
      alarmTypeList: [],
      eqptTypeList: [], // 所有策略类型
      alarmTypeListForAdd: [], // 新增的策略类型
      pageNum: 1,
      pageSize: 10,
      totalPageNum: 0,
      tableData: [],
      clickBtnType: 1 // 1: 点击了新增按钮 2: 点击了编辑按钮
    }
  },
  mounted () {
    this.getEqptType()
    this.getAlarmType()
    this.getAlarmTypeForAdd()
    this.initData()
  },

  methods: {
    // 查询按钮
    searchData () {
      this.pageNum = 1
      this.initData()
    },

    // 获取告警列表
    async initData () {
      const params = {
        current: this.pageNum,
        pageSize: this.pageSize
      }
      const { code, data, msg } = await searchTactics(Object.assign({}, this.queryParams, params))
      if (code === 0) {
        this.tableData = data.records
        this.totalPageNum = data.total
      } else {
        this.$message.warning(msg)
      }
    },

    // 新增
    handleAdd () {
      // 20210806 edit jiangzhaojun 新增窗口打开前刷新告警类型
      this.getAlarmTypeForAdd()
      this.clickBtnType = 1
      this.$refs.TacticsModal.isAdd = true
      this.$refs.TacticsModal.add()
    },

    // 编辑按钮
    handleEdit (row) {
      this.clickBtnType = 2
      this.$refs.TacticsModal.isAdd = false
      this.$refs.TacticsModal.edit(row)
    },

    // 删除按钮
    handleDelete (strategyId) {
      this.$confirm('此操作将永久删除该条记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.dataDelete(strategyId)
        })
        .catch(() => {
          this.$message.warning('已取消删除')
        })
    },
    // 删除函数
    async dataDelete (strategyId) {
      const { code, msg } = await delAlarmTactics(strategyId)
      if (code === 0) {
        this.$message.success('删除成功')
        if (this.tableData.length === 1 && this.currentPage > 1) {
          this.currentPage--
        }
        this.initData()
      } else {
        this.$message.warning(msg)
      }
    },

    // 获取编辑的告警类型
    async getAlarmType () {
      let params = {
        alarmWay: 1
      }
      const { code, data, msg } = await getAlarmType(params)
      if (code === 0) {
        this.alarmTypeList = data
      } else {
        this.$message.warning(msg)
      }
    },

    // 获取新增的告警类型
    async getAlarmTypeForAdd () {
      let params = {
        alarmWay: 1
      }
      const { code, data, msg } = await getAlarmTypeForAdd(params)
      if (code === 0) {
        this.alarmTypeListForAdd = data
      } else {
        this.$message.warning(msg)
      }
    },

    // 获取设备类型
    async getEqptType () {
      const { code, data, msg } = await getEqptType()
      if (code === 0) {
        this.eqptTypeList = data || []
      } else {
        this.$message.warning(msg)
      }
    },

    getLabel (row, type) {
      // type: 1: 告警等级  2: 告警条件  3: 是否转为工单
      if (type === 1) {
        return row.strategyConditionList.map(item => {
          return this.$base.constFormatter(alarmLevelList, item.alarmLevel)
        })
      }
      if (type === 2) {
        // attributeType:  0：数值，1：字符，2：布尔
        let tempConditionArr = []
        let tempValueArr = []
        if (row.attributeType === '0') tempConditionArr = numberCondition
        if (row.attributeType === '1') tempConditionArr = stringCondition
        if (row.attributeType === '2') {
          tempConditionArr = booleanCondition
          tempValueArr = booleanValue
        }
        return row.strategyConditionList.map(item => {
          let obj = {
            conditionName1: this.$base.constFormatter(tempConditionArr, item.alarmCondition),
            value1:
              row.attributeType !== '2' ? item.alarmValue : this.$base.constFormatter(tempValueArr, item.alarmValue)
          }
          if (item.alarmValue2) {
            obj['conditionName2'] = this.$base.constFormatter(tempConditionArr, item.alarmCondition2)
            obj['value2'] =
              row.attributeType !== '2' ? item.alarmValue2 : this.$base.constFormatter(tempValueArr, item.alarmValue2)
          }
          return obj
        })
      }
      if (type === 3) {
        return row.strategyConditionList.map(item => {
          return this.$base.constFormatter(changeOrderList, item.changeOrder)
        })
      }
    },

    // 弹框回调
    TacticsModalOk () {
      this.initData()
    },

    // 页码改变
    pageHandleChange (page) {
      this.pageNum = page
      this.initData()
    }
  }
}
</script>

<style lang="scss" scoped>
.app-inner {
  .table-btn {
    margin-bottom: 15px;
  }
  .header-card {
    margin-bottom: 10px;
  }
  .table-card {
    .el-pagination {
      text-align: center;
      display: block;
      margin: 10px auto;
    }
    /deep/ .el-table th {
      display: table-cell !important;
    }
    .endTime {
      margin-left: 20px;
    }
    .time-span {
      margin-right: 5px;
    }
  }
  .el-dialog {
    .el-select {
      width: 100%;
    }
  }
}
</style>
